<template>
  <!-- el-row组件表示行； 里面el-col表示列 -->
  <!-- el-row把一行分为24列 -->
  <!-- el-col 默认是24列一整行；但是可以通过span属性控制; offset属性控制偏移 -->
  <el-row class="login-container"
          type="flex"
          align="middle"
          justify="center">
    <el-col class="login-box"
            :span="7">
      <h3>欢迎登录</h3>
      <!-- 登陆表单   element-ui里面可以实现表单校验要三个核心要素-->
      <!--1、 el-form 表单组件 
                要有 model属性值为表单数据对象；
                要有rules属性值为表单验证对象；
                要设置一个ref 
      -->
      <!--2、 el-form-item 表单项组件 要有prop属性 值为字段名称-->
      <!--3、 el-input等等  表单控件组件  要有v-model-->
      <el-form label-width="60px"
               :model="formData"
               :rules="formRules"
               ref="formRef">
        <el-form-item label="账号"
                      prop="account">
          <el-input v-model="formData.account"
                    clearable
                    prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="formData.password"
                    clearable
                    show-password
                    prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button class="login-btn"
                     type="primary"
                     :loading="isLoading"
                     @click="btnOK">立即登陆</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "aLogin",
  data () {
    return {
      // 表单数据对象
      formData: {
        account: "learnAdmin@163.com",
        password: "admin888",
      },
      isLoading: false, // 是否登录中
      //   表单验证对象
      formRules: {
        // 字段名称:[{验证规则1},{验证规则2},...]
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 2, max: 20, message: "长度在2-20", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created () {
    this.isLoading = false;
  },
  methods: {
    async btnOK () {
      // 1. 表单校验 （调用表单的校验方法获取校验结果）
      //   this.$refs.formRef.validate(function (valid) {
      //     console.log(valid);
      //   });
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      // 2. 数据是否要加工处理
      // 3. 发生请求请求
      this.isLoading = true;
      // 这里异步的；如果不写awiat则会出现权限控制逻辑错误
      try {
        await this.$store.dispatch("user/loginAction", this.formData);
        this.$router.push("/");
      } catch (error) {
        this.isLoading = false;
      }

      // 调用获取用户资料的action，因为这里已经有了token
      // 这里写，必须要重新登录才可以！
      // await this.$store.dispatch('user/getUserProfileAction');
      // 4. 跳转主页(登录成功才可以跳转)
      this.isLoading = false;
    },
  },
};
</script>
<style scoped>
.login-container {
  background-color: #2d3a4b;
  min-height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-box {
  background-color: #fff;

  min-height: 300px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 30px;
}

.login-box h3 {
  text-align: center;
  color: orange;
  font-weight: normal;
  font-size: 22px;
  border-bottom: 1px solid #ccc;
  line-height: 60px;
  margin-bottom: 30px;
}

.login-btn {
  display: block;
  width: 100%;
}
</style>
